<template>
	<view>
		<topic-info :topicInfo="selectTopic"></topic-info>

		<scroll-view :style="{ height: swiperHeight + 'px' }" scroll-y="true" class="list" @scrolltolower="loadMore">
			<view class="trend-list-info">
				<block v-for="(trend, _index) in trendList" :key="_index"><trend-info :trend="trend" :index="_index" @thumbsUp="thumbsUp"></trend-info></block>
				<!-- 加载更多 -->
				<load-more :loadText="loadText" :loading="false"></load-more>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import topicInfo from '../../components/topic/topic-info.vue';
import trendInfo from '../../components/common/trend-info.vue';
import loadMore from '../../components/common/load-more.vue';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
export default {
	computed: {
		...mapState(['selectTopic'])
	},
	components: {
		topicInfo,
		trendInfo,
		loadMore
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.swiperHeight = res.windowHeight - 150;
				this.loadTrendList();
			}
		});
	},
	data() {
		return {
			swiperHeight: 0,
			loadText: '上拉加载更多',
			pageNo: 1,
			trendList: []
		};
	},
	methods: {
		loadMore() {
			if (this.loadText != '上拉加载更多') {
				return;
			}
			// 修改状态
			this.loadText = '加载中...';
			// 获取数据
			this.pageNo += 1;
			this.loadTrendList();
		},
		loadTrendList() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.topicTrend,
				header: constant.authHead(),
				data: {
					talkId: this.selectTopic.topicId,
					pageNo: this.pageNo
				},
				method: 'GET',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						this.trendList.push(...res.data.data);
						if (res.data.data.length < 10) {
							this.loadText = '没有更多数啦!';
						} else {
							this.loadText = '上拉加载更多';
						}
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					this.loadText = '上拉加载更多';
					console.log(r);
				}
			});
		},
		thumbsUp(index) {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.thumbsUp,
				data: {
					trendId: this.trendList[index].id
				},
				header: constant.authHead(),
				method: 'GET',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						if (this.trendList[index].likesNum < res.data.data) {
							this.trendList[index].isLike = true;
						} else {
							this.trendList[index].isLike = false;
						}
						this.trendList[index].likesNum = res.data.data;
					} else {
						showToast(res.data.msg);
					}
				},
				fail(r) {
					console.log(r);
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.trend-list-info {
	margin-top: 40rpx;
}
</style>
